<template>
  <view class="form-card">
    <uni-forms ref="form" :modelValue="formData" label-width="160rpx">
      <!-- 课程选择 -->
      <uni-forms-item label="选择课程" required>
        <uni-data-select
          v-model="formData.roomId"
          :localdata="courseList"
          placeholder="请选择课程"
        />
      </uni-forms-item>

      <!-- 请假日期 -->
      <uni-forms-item label="请假日期" required>
        <uni-datetime-picker type="date" v-model="formData.leaveTime" placeholder="请选择日期" />
      </uni-forms-item>

      <!-- 请假理由 -->
      <uni-forms-item label="请假理由" required>
        <uni-easyinput
          type="textarea"
          v-model="formData.remark"
          placeholder="请输入详细理由"
          :maxlength="200"
        />
      </uni-forms-item>

      <!-- 提交按钮 -->
      <view class="button-group">
        <button class="primary" @click="submitForm">提交申请</button>
      </view>
    </uni-forms>
  </view>
</template>

<script setup lang="ts">
import type { StudentLeaveItem } from '@/types/studentLeave'
import type { CourseItem, CourseParams } from '@/types/course'
import { useMemberStore } from '@/stores'
import { getCourseList } from '@/services/home.ts'
import { submitLeaveAPI } from '@/services/studentLeave.ts'
import { ref, onMounted } from 'vue'
// 获取会员Store实例
const memberStore = useMemberStore()

const courseList = ref<{ value: number; text: string }[]>([])

// 分页参数
const coursePage = ref<CourseParams>({ pageNum: 1, pageSize: 100 })

const getCourseListData = async (pageParams: CourseParams) => {
  pageParams.studentId = memberStore.profile?.userId

  try {
    const res = await getCourseList(pageParams)
    courseList.value = res.data.rows.map((item) => ({
      value: item.classRoomId || 0,
      text: item.subject || '',
    }))
  } catch (error) {
    console.error('获取课程列表失败:', error)
  }
}

const formData = ref<StudentLeaveItem>({
  studentId: memberStore.profile?.userId || 0,
  id: null,
  roomId: null,
  subject: '',
  teacherId: null,
  teacherName: '',
  studentName: memberStore.profile?.userName || '',
  leaveTime: '',
  subjectId: null,
  remark: '',
})

const submitForm = async () => {
  if (!formData.value) {
    return
  }
  // 调用请假接口
  const res = await submitLeaveAPI(formData.value)
  if (res.code == 200) {
    uni.showToast({
      title: '请假申请成功',
      icon: 'success',
    })
    formData.value = {
      studentId: memberStore.profile?.userId || 0,
      id: null,
      roomId: null,
      subject: '',
      teacherId: null,
      teacherName: '',
      studentName: memberStore.profile?.userName || '',
      leaveTime: '',
      subjectId: null,
      remark: '',
    }
  }
}
// 页面加载
onMounted(async () => {
  await Promise.all([getCourseListData(coursePage.value)])
})
</script>

<style lang="scss">
.form-card {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 32rpx;
  margin: 32rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
}
/* 表单项样式 */
.uni-forms-item {
  margin-bottom: 40rpx !important;

  &__label {
    font-size: 28rpx !important;
    color: #333 !important;
    width: 160rpx !important;
  }
}
/* 输入框样式 */
.uni-easyinput {
  width: 100%;
  height: 88rpx;
  padding: 0 20rpx;
  border-bottom: 1rpx solid #f0f2f5;
  font-size: 28rpx;
  color: #333;

  &:focus-within {
    border-bottom-color: #07c160;
  }
}
/* 选择器样式 */
.uni-data-select,
.uni-datetime-picker {
  width: 100%;
  height: 88rpx;
  padding: 0 20rpx;
  border-bottom: 1rpx solid #f0f2f5;
  font-size: 28rpx;
  color: #333;
}

/* 按钮组样式 */
.button-group {
  margin-top: 60rpx;
  padding: 0 20rpx;
}

button.primary {
  width: 100%;
  height: 96rpx;
  background-color: #07c160;
  color: #fff;
  border-radius: 48rpx;
  font-size: 32rpx;
  font-weight: 500;
  box-shadow: 0 4rpx 10rpx rgba(7, 193, 96, 0.3);
  transition: all 0.3s ease;
  border: none;
}

button.primary:active {
  background-color: #06ad56;
  transform: scale(0.98);
  box-shadow: 0 2rpx 5rpx rgba(7, 193, 96, 0.2);
}
</style>
